
<script setup lang='ts' name="Pagination">
import { IPageable,ILayouts } from './types/index'
import { reactive, ref } from 'vue'

 interface PageableProp {
    pagesConfig:IPageable
    background?:boolean
    layouts?: ILayouts
    pageSizes?:number[]
 }
 // 直接使用 defineProps 来定义 props 的类型
 const props = withDefaults(defineProps<PageableProp>(), {
    pagesConfig: ()=>({
        total: 100,
        currentPage: 1,
        pageSize: 50,
    }),
    pageSizes:()=> [50, 100, 300, 500],
    background: true,
    layouts:()=> ['Total', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump']
})

// 使用 reactive 包装 pagesConfig 使其可变
const pagesConfig = reactive(props.pagesConfig)

const emit = defineEmits(['updatePage'])

// 更新页数
const handlePageChange = <T extends { currentPage: number, pageSize: number, total: number }>({ currentPage, pageSize, total }: T) =>{
        pagesConfig.currentPage = currentPage
        pagesConfig.pageSize = pageSize
        pagesConfig.total = total
        emit("updatePage",{currentPage, pageSize, total})
}

</script>

<template>
    <vxe-pager
        v-show="pagesConfig.total > 0"
        :background="background"
        :current-page="pagesConfig.currentPage"
        :page-size="pagesConfig.pageSize"
        :page-sizes="pageSizes"
        :total="pagesConfig.total"
        :layouts="layouts"
        @page-change="handlePageChange"
    >
    </vxe-pager>
</template>


<style lang='scss' scoped>
 
</style>